<template>
  <div class="Personnelirregularitiesregistration">
    <mt-cell title="设备编号">
      <el-autocomplete
        v-model="state4"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入内容"
        @select="handleSelect"
        class="inputsearch"
      ></el-autocomplete>
    </mt-cell>
    <mt-cell title="设备名称">
      <el-input placeholder="请输入内容" v-model="dataFrom.facilitiesName" clearable></el-input>
    </mt-cell>
    <mt-cell title="设备类型">
      <el-input placeholder="请输入内容" v-model="dataFrom.facilitiesTypeName" clearable></el-input>
    </mt-cell>
    <mt-cell title="产权归属">
      <el-input placeholder="请输入内容" v-model="dataFrom.facilitiesDeptName" clearable></el-input>
    </mt-cell>
    <mt-cell title="违规日期">
      <span
        @click="selectData"
        style="display:block;margin-right:0.5rem;cursor: pointer;"
      >{{this.dataFrom.illegalTime}}</span>
      <div class="pickerPop" @touchmove.prevent>
        <!-- 年月日时分选择 -->
        <mt-datetime-picker
          lockScroll="true"
          ref="datePicker"
          v-model="selectedValue"
          class="myPicker"
          type="datetime"
          year-format="{value}"
          month-format="{value}"
          date-format="{value}"
          hour-format="{value}"
          minute-format="{value}"
          second-format="{value}"
          @confirm="dateConfirm()"
        ></mt-datetime-picker>
      </div>
    </mt-cell>
    <mt-cell title="联系电话">
      <el-input placeholder="请输入内容" v-model="dataFrom.telephone" clearable></el-input>
    </mt-cell>
    <mt-cell title="违规地点">
      <el-input placeholder="请输入内容" v-model="dataFrom.illegalPlace" clearable></el-input>
    </mt-cell>
    <mt-cell title="违规类型">
      <el-select v-model="dataFrom.illegalType" clearable placeholder="请选择" @change="Wgui">
        <el-option
          v-for="item in Wgtype"
          :key="item.pkid"
          :label="item.deductionName"
          :value="item.pkid"
        ></el-option>
      </el-select>
    </mt-cell>
    <mt-cell title="点击上传照片"></mt-cell>
    <div>
      <el-upload
        :action="ImgUrl"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <!-- <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt>
      </el-dialog>-->
    </div>
    <mt-field label="备注" placeholder="备注" type="textarea" rows="4" v-model="dataFrom.remarks"></mt-field>

    <div class="footerButton">
      <el-button type="success" @click="Submission">提交</el-button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { MessageBox } from "mint-ui";
import authorization from "@/api/author";
import { DatetimePicker } from "mint-ui";
import { formatDateMin } from "@/common/js/time.js";
import search from "../../common/searchUser";
export default {
  data() {
    return {
      restaurants: [],
      state4: "",
      dataFrom: {
        facilitiesNo: null,
        userType: null,
        interDno: null,
        facilitiesName: null,
        vltType: null,
        vltPlace: null,
        ispHrid: null,
        remarks: null,
        illegalTime: "请选择日期",
        illegalPlace: null,
        telephone: null,
        illegalType: null,
        serialKey: null,
        deductionScore: null
      },
      processtype: [],
      usertype: [],
      Wgtype: [],
      dateVal: "", // 默认是当前日期
      selectedValue: "",
      input10: "",
      ImgUrl: this.$store.state.ImgUrl,
      dialogImageUrl: "",
      dialogVisible: false,
      time: ""
    };
  },
  components: {
    search
  },
  created() {},
  computed: {
    ...mapState(["userInfo1"])
  },
  mounted() {
    this.GetData(); //下拉框data
    this.cooikesImg();
    this.$store.commit("SET_USER_INFO", "设备违规登记");
    this.getSerialKey();
  },
  watch: {
    $route(to, from) {
      console.log(to);
      if (to.path == "/Scan") {
      }
    }
  },
  methods: {
    Wgui(val) {
      for (var d in this.Wgtype) {
        if (this.Wgtype[d].pkid == val) {
          this.dataFrom.deductionScore = this.Wgtype[d].deductionScore;
        }
      }
    },
    // 获取文件批号
    getSerialKey() {
      this.$store.dispatch("GetSerialkey").then(data => {
        this.dataFrom.serialKey = data;
      });
    },
    //无动力设备查询
    querySearchAsync(queryString, cb) {
      var list = [{}];
      this.$store.dispatch("facilities", queryString).then(data => {
        list = data.list;
        for (let i of data.list) {
          i.value = i.facilitiesSteel; //将想要展示的数据作为value
        }
        cb(list);
      });
    },
    //回调函数
    handleSelect(item) {
      //  取id
      this.$store.dispatch("facilitiesMsg", item.id).then(data => {
        this.dataFrom.facilitiesId = data.list[0].id
        this.dataFrom.facilitiesName = data.list[0].facilitiesName; //设备类型
        this.dataFrom.facilitiesTypeName = data.list[0].facilitiesTypeName; //设备类型
        this.dataFrom.facilitiesDeptName = data.list[0].facilitiesDeptName; //产权归属
        this.dataFrom.telephone = data.list[0].telephone; //联系电话
      });
    },
    //下拉框
    GetData() {
      this.$store.dispatch("processtype").then(data => {
        this.processtype = data;
      });
      this.$store.dispatch("usertype").then(data => {
        this.usertype = data;
      });
      this.$store.dispatch("Wgtype").then(data => {
        this.Wgtype = data;
      });
    },
    selectData() {
      // 打开时间选择器
      // 如果已经选过日期，则再次打开时间选择器时，日期回显（不需要回显的话可以去掉 这个判断）
      if (this.selectedValue) {
        this.selectedValue = this.selectedValue;
      } else {
        this.selectedValue = new Date();
      }
      this.$refs["datePicker"].open();
    },
    dateConfirm() {
      // 时间选择器确定按钮，并把时间转换成我们需要的时间格式
      this.dataFrom.illegalTime = formatDateMin(this.selectedValue);
    },
    cooikesImg() {
      let token = JSON.parse(authorization()).token;
      this.ImgUrl = this.ImgUrl + "/oss/file/upload?token=" + token;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    UserID(val) {
      this.dataFrom.hrid = val;
    },
    UserIDH(val) {
      this.dataFrom.ispHrid = val;
    },
    //提交
    Submission() {
      let playload = {};
      Object.keys(this.dataFrom).forEach(key => {
        if (this.dataFrom[key]) {
          playload[key] = this.dataFrom[key];
        }
      });
      this.$store
        .dispatch("flfacilitiesillegalsaveAndStart", playload)
        .then(code => {});
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scpoed>
.Personnelirregularitiesregistration {
  position: fixed;
  top: 0.7rem;
  left: 0;
  overflow-y: scroll;
  width: 100%;
  height: auto;
  -webkit-overflow-scrolling: touch;
  bottom: 0;
}
.Personnelirregularitiesregistration .mint-cell-title {
  text-align: left;
}
.footerButton {
  margin-top: 0.7rem;
  text-align: center;
  margin-bottom: 0.7rem;
}
.Personnelirregularitiesregistration input {
  border: none;
  border-radius: 0;
}
.Personnelirregularitiesregistration .el-upload--picture-card {
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
}
.Personnelirregularitiesregistration
  .el-upload-list--picture-card
  .el-upload-list__item {
  width: 2rem;
  height: 2rem;
}
.Personnelirregularitiesregistration .mint-cell-wrapper {
  border: 1px solid #eee;
}
.margin_10 {
  margin-right: 1.5rem;
}
</style>
